<template>
  <el-card>
    <el-row>
      <div v-if="books.length === 0" class="no-books">
        <el-empty description="空空如也">
          <el-button type="primary" plain>书库</el-button>
        </el-empty>
      </div>
      <div class="book-container">
        <div v-for="(book, index) in books" :key="index" class="book-item">
          <router-link :to="{ name: 'book_detail', query: { id: book.id } }">
            <img :src="book.picture" alt="Book Cover" class="book-cover" />
          </router-link>
          <p class="book-title" :title="book.name">{{ book.name }}</p>
          <p class="book-author" :title="book.author">{{ book.author }}</p>
          <el-row>
            <el-col :span="19" style="text-align:right">
              <el-popconfirm
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  icon="el-icon-info"
                  icon-color="red"
                  title="确定要移出书架吗？"
                  @confirm="changeCollect(book)"
              >
                <el-button slot="reference" type="primary" plain>移出书架</el-button>
              </el-popconfirm>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-row>
    <el-row>
      <el-pagination
          @size-change="sizeChange"
          @current-change="currentChange"
          :current-page="pageData.currentPage"
          :page-sizes="[8, 12, 18, 24]"
          :page-size=pageData.pageSize
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageData.total">
      </el-pagination>
    </el-row>
  </el-card>
</template>

<script>
export default {
  name: "BookShelf",
  data() {
    return {
      books: [],
      pageData:{
        currentPage:1,
        pageSize:8,
        total:0
      },
    };
  },
  created() {
    this.fetchLibraryCollect();
  },
  methods: {
    async fetchLibraryCollect() {
      try {
        const id = sessionStorage.getItem("id");
        const params = { ...this.pageData,id };
        const { data: res } = await this.$axios.get("collect/getBookCollect", { params });
        this.tableData = res.data.records;
        this.pageData.total = res.data.total;
        this.books = res.data.records.map(record => ({
          picture: record.picture,
          name: record.name,
          author: record.author,
          id:record.id,
        }));
        console.log(this.books)
      } catch (error) {
        console.error("获取收藏记录失败", error);
      }
    },
    async changeCollect(book) {
      const { data: res } = await this.$axios.get("/collect/changeCollect", {
        params: {
          bookid:book.id,
          readerid: sessionStorage.getItem("id")
        }
      })
      if (res.data) {
        this.$message.info("已移出书架")
      }
      await this.fetchLibraryCollect()
    },
    currentChange(val){
      this.pageData.currentPage=val
      this.fetchLibraryCollect()
    },
    sizeChange(val){
      this.pageData.pageSize=val
      this.fetchLibraryCollect()
    },
  }
}
</script>

<style scoped>
.book-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.book-item {
  padding: 20px;
  text-align: center;
  width: 180px;
  height: 224px;
  box-sizing: border-box;
}

.book-cover {
  width: 90px;
  height: 120px;
  object-fit: cover;
  transition: transform 0.2s, box-shadow 0.2s; /* 添加过渡效果 */
}
.book-cover:hover {
  transform: scale(1.05); /* 图片放大 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影 */
}

.book-title {
  font-size: 18px;
  margin: 10px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.book-author {
  font-size: 14px;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.el-pagination{
  margin-top: 30px;
}
.no-books {
  text-align: center;
  padding: 62px;
  font-size: 16px;
  color: #999;
}
</style>